import { Button } from "antd";
import { useState, forwardRef } from "react";
import { call } from "../../utils/index.js";
import { to } from "wsp-toolkit";

/**
 *
 * @param props {{
 *   children: ReactNode;
 *   loading: boolean | { delay: number };
 *   onClick: (event: MouseEvent) => void
 * }}
 * @returns {JSX.Element}
 */

const SButton = forwardRef((props, ref) => {
  const { children, loading, onClick, ...otherProps } = props;
  const [_loading, set_loading] = useState(false);

  async function handleClick(evt) {
    set_loading(true);
    const [err] = await to(call(onClick)(evt));
    set_loading(false);
    if (err) {
      console.error("BtnError",err);
    }
  }

  return (
    <Button ref={ref} {...otherProps} loading={_loading || loading} onClick={handleClick}>
      {children}
    </Button>
  );
})


export default SButton
